<!--悬浮播放 -->
<template>
  <el-row class="bodyStyle">
    <el-col
      :span="4"
      class="cardStyle"
      v-for="item in contentList"
      :key="item.id"
      @click.native="goToSearchLists(item)"
    >
      <el-card
        class="imageStyle"
        shadow="hover"
        :body-style="{ padding: '0px' }"
      >
        <!-- 展示图片和姓名 -->
        <img class="imgOne" :src="item.coverImgUrl" />
        <div class="textStyle">{{ item.name }}</div>
        <!-- 鼠标悬浮样式 -->
        <div class="top">
          <img class="imgTwo" src="../assets/play.png" />
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "ContentList",
  props: ["contentList"],
  data() {
    return {
      currentDate: new Date(),
    };
  },
  methods: {
    //转向详情歌单页面
    goToSearchLists(item) {
      if (item.type === 1) {
        this.$router
          .push({
            name: "alllists",
            query: {
              list: item,
            },
          })
          .catch((err) => {
            console.log("err", err);
          });
      } else if (item.type === 2) {
        console.log('item',item)
        this.$router
          .push({
            name: "alllsingers",
            query: {
              list: item,
            },
          })
          .catch((err) => {
            console.log("err", err);
          });
      }
    },
  },
};
</script>

<style>
.bodyStyle {
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: 170px;
}
.cardStyle {
  width: 250px;
  margin: 20px;
}
.imageStyle {
  height: 260px;
  width: 100%;
}
.textStyle {
  font-size: 13px;
  line-height: 40px;
}
.imgOne {
  height: 220px;
  width: 100%;
  display: block;
}
.imgTwo {
  height: 120px;
  width: 120px;
  margin-top: 160px;
}
/* 写好遮罩层样式,并且让它先不显示 */
.top {
  width: 250px;
  height: 400px;
  background-color: black;
  margin-top: -360px;
  opacity: 0;
}
/* 鼠标hover,显示遮罩,设置过渡时间 */
.top:hover {
  opacity: 0.4;
  transition: opacity 0.5s;
}
</style>